import { nextTick, type App, type Directive, type DirectiveBinding } from 'vue';


const updated = (_: any, binding: DirectiveBinding<any>) =>  {
    // console.log('触发：drag:', binding.value);

    if(!binding || !Object.keys(binding.value).length || !binding?.value?.visible) return;

    const screenWidth = document.body.clientWidth; // 屏幕的宽度

    const screenHeight = document.documentElement.clientHeight; // 屏幕的高度

    //处理拖拽逻辑
    nextTick(() => {

        const dragModalEl = document.querySelector(binding?.value?.DragWrapDow);
        if(!dragModalEl) return;

        // 拖拽按钮
        const DragButton = dragModalEl.querySelector('.ant-modal-header');
        DragButton.style.cssText += ';cursor:move;';

        // 拖拽窗口 DragVindow
        const DragVindow = dragModalEl.querySelector('.ant-modal');

        const sty = (function () {
            return (dom: any, attr: any) => getComputedStyle(dom, null)[attr];
        })();

        // 按下鼠标处理事件
        DragButton.onmousedown = (e: any) => {

            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - DragButton.offsetLeft;
            const disY = e.clientY - DragButton.offsetTop;
        
            const dragDomWidth = DragVindow.offsetWidth; // 对话框宽度
            const dragDomheight = DragVindow.offsetHeight; // 对话框高度
        
            const minDragDomLeft = DragVindow.offsetLeft;
            const maxDragDomLeft = screenWidth - DragVindow.offsetLeft - dragDomWidth;
        
            const minDragDomTop = DragVindow.offsetTop;
            const maxDragDomTop = screenHeight - DragVindow.offsetTop - dragDomheight;
    
            let styL: any = sty(DragVindow, 'left');
            if (styL === 'auto') styL = '0px';
            let styT: any = sty(DragVindow, 'top');

            if (styL.includes('%')) {
                styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100);
                styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100);
            } else {
                styL = +styL.replace(/px/g, '');
                styT = +styT.replace(/px/g, '');
            }

            document.onmousemove = (e) => {

                // 通过事件委托，计算移动的距离
                let left = e.clientX - disX;
                let top = e.clientY - disY;

                // 边界处理
                if (-(left) > minDragDomLeft) {
                    left = -(minDragDomLeft);
                } else if (left > maxDragDomLeft) {
                    left = maxDragDomLeft;
                }

                if (-(top) > minDragDomTop) {
                    top = -(minDragDomTop);
                } else if (top > maxDragDomTop) {
                    top = maxDragDomTop;
                }
                // 设置当前元素
                DragVindow.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`;

            };
            document.onmouseup = () => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };

        // console.log('处理：', screenWidth, screenHeight, dragModalEl);
    });
};

const ModalDragDirective: Directive = {
    updated,
};

export function setupModalDragDirective(app: App) {
    app.directive('dragMove', ModalDragDirective);
}